Typography

All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.

Device Extra small Small Medium Large Extra large
Base font 16px 17px 18px 19px 20px
<h1> 32px 34px 36px 38px 40px
<h2> 28px 29px 31.5px 33.25px 35px
<h3> 24px 25.5px 27px 28.5px 30px
<h4> 20px 21.25px 22.5px 23.75px 25px
<h5> 18px 19.125px 20.25px 21.375px 22.5px
<h6> 16px 17px 18px 19px 20px
<small> 14px 14.875px 15.75px 16.625px 27.5px

Headings:

We love .classes

As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes

But of course, .classes are not a bad practice at all.

Feel free to use modifiers.

<button class="warning">Action</button>

Just try to keep your HTML clean and semantic to keep the Pico spirit.

<button class="button-red margin-large padding-medium">Action</button>

Heading 2

Subtitle for heading 2

<hgroup>
  <h2>Heading 2</h2>
  <h3>Subtitle for heading 2</h3>
</hgroup>
<div class="headings">
  <h2>Heading 2</h2>
  <h3>Subtitle for heading 2</h3>
</div>

Inline text elements:

Abbr. abbr

Bold strong b

Italic i em cite

Deleted del

Inserted ins

Ctrl + S kbd

Highlighted mark

Strikethrough s

Small small

Text Sub sub

Text Sup sup

Underline u

Links come with .secondary and .contrast styles.

ℹ️ These classes are not available in the class-less version.

Primary
Secondary
Contrast
<a href="#">Primary</a>
<a href="#" class="secondary">Secondary</a>
<a href="#" class="contrast">Contrast</a>

Blockquote:

"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
- Phasellus eget lacinia
<blockquote>
  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
  Nam at dui sit amet ipsum cursus ornare."
  <footer>
    <cite>- Phasellus eget lacinia</cite>
  </footer>
</blockquote>